Vue.component("public", {
    template: `
    <span>
        <div class="header">
            <div class="header-wrap">
                        <div class="header-logo">
                            <a class="w2e-logo" href="index.html">
                                <img src="//qimgs.qunarzz.com/wpf_newmpic_001/54f70ce8dd89589d3fd2289dcc25b7d8.jpg"
                                     title="去哪儿网" />
                            </a>
                        </div>
                        <div>
                            <slot name="header-ul"></slot>
                        </div>
                        <slot v-if="!user" name="nologin"></slot>
                        <slot v-else name="logined"  v-bind:m="user"></slot>
                    </div> 
        </div>
        <div class="container">
            <slot name="container"></slot>
        </div>
        <div class="footer">
                    <div class="footer-wrap">
                        <div class="footer-section about">
                            <h4>关于我们</h4>
                            <ul>
                                <li><a href="#">公司简介</a></li>
                                <li><a href="#">联系我们</a></li>
                                <li><a href="#">加入我们</a></li>
                                <li><a href="#">法律声明</a></li>
                            </ul>
                        </div>
                        <div class="footer-section help">
                            <h4>用户帮助</h4>
                            <ul>
                                <li><a href="#">常见问题</a></li>
                                <li><a href="#">服务条款</a></li>
                                <li><a href="#">隐私政策</a></li>
                                <li><a href="#">意见反馈</a></li>
                            </ul>
                        </div>
                        <div class="footer-section follow">
                            <h4>关注我们</h4>
                            <div class="social-media">
                                <a href="#"><img src="images/qq.png" alt="QQ"></a>
                                <a href="#"><img src="images/wx.png" alt="微信"></a>
                                <a href="#"><img src="images/wb.png" alt="微博"></a>
                                <a href="#"><img src="images/facebook.png" alt="Facebook"></a>
                                <a href="#"><img src="images/blbl.png" alt="哔哩哔哩"></a>
                            </div>
                        </div>
                        <div class="footer-section links">
                            <h4>友情链接</h4>
                            <ul>
                                <li><a href="#">合作伙伴1</a></li>
                                <li><a href="#">合作伙伴2</a></li>
                                <li><a href="#">合作伙伴3</a></li>
                                <li><a href="#">合作伙伴4</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="footer-bottom">
                        <p>&copy; 2024 去哪儿网. 保留所有权利. | 京ICP备 12345678 号 | 京公网安备 11000002000001 号</p>
                    </div>
                </div>
    </span>
    `,
    data() {
        return {
            user: null
        }
    },
    mounted() {
        axios.get("/users/isLogin").then(res => {
            this.user = res.data.data;
            this.$emit('user-loaded', this.user);
        });
    },
    watch: {
        user(newValue, oldValue) {
            if (newValue) {
                this.$nextTick(() => {
                    this.addHoverListeners();
                });
            }
        }
    },
    methods: {
        addHoverListeners() {
            this.$nextTick(() => {
                let msg = document.querySelector('.msg');
                let msgTips = document.querySelector('.msg-tips');

                let per = document.querySelector('.per');
                let perTips = document.querySelector('.user-tips');

                let msgTimer; // 用于存储显示和隐藏 msg-tips 的定时器
                let perTimer; // 用于存储显示和隐藏 per-tips 的定时器

                if (msg && msgTips) {
                    // 监听 msg 的鼠标悬停事件
                    msg.addEventListener('mouseenter', function () {
                        clearTimeout(msgTimer);
                        msgTips.style.display = 'block';
                    });

                    // 监听 msg 的鼠标离开事件
                    msg.addEventListener('mouseleave', function () {
                        msgTimer = setTimeout(function () {
                            msgTips.style.display = 'none';
                        }, 300);
                    });

                    // 监听 msg-tips 的鼠标进入事件
                    msgTips.addEventListener('mouseenter', function () {
                        clearTimeout(msgTimer);
                    });

                    // 监听 msg-tips 的鼠标离开事件
                    msgTips.addEventListener('mouseleave', function () {
                        msgTimer = setTimeout(function () {
                            msgTips.style.display = 'none';
                        }, 300);
                    });
                }

                if (per && perTips) {
                    // 监听 per 的鼠标悬停事件
                    per.addEventListener('mouseenter', function () {
                        clearTimeout(perTimer);
                        perTips.style.display = 'block';
                    });

                    // 监听 per 的鼠标离开事件
                    per.addEventListener('mouseleave', function () {
                        perTimer = setTimeout(function () {
                            perTips.style.display = 'none';
                        }, 300);
                    });

                    // 监听 per-tips 的鼠标进入事件
                    perTips.addEventListener('mouseenter', function () {
                        clearTimeout(perTimer);
                    });

                    // 监听 per-tips 的鼠标离开事件
                    perTips.addEventListener('mouseleave', function () {
                        perTimer = setTimeout(function () {
                            perTips.style.display = 'none';
                        }, 300);
                    });
                }
            });
        }
    }
})